<template>
  <div class="feedbackZT">
    <headerCom></headerCom>
    <div class="feedbackZTCon">
        <div class="feendbackTitle">
            <span>反馈{{titleName}}</span>
        </div>
        <div class="feedbackFrom">
            <div>
                <span>
                    <i>*</i>
                    <span>{{titleName}}名称：</span>
                </span>
                <input type="text" placeholder="支持输入中文、英文、数字，最多10个字符" maxlength="10" v-model="inputValue" @blur="fedInputB" @focus="fedInputF">
                <span class="inputError" v-if="inputError"><i></i>{{inputErrorC}}</span>
            </div>
            <div class="fedTextarea">
                <span class="font">
                    <i>*</i>
                    <span>{{titleName}}描述：</span>
                </span>
                <textarea name="feedback" id="" cols="30" rows="10" maxlength="100" v-model="textareaValue" @blur="fedInputB" @focus="fedInputF" @keyup="textareaKey"></textarea>
                <span class="textareaError" v-if="textareaError"><i></i>{{textareaErrorC}}</span>
                <p class="fontNum">{{textareaNum}}/100</p>
            </div>
            <button @click="feedbackFromBut">提交</button>
        </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/header'

export default {
  data () {
    return {
      type: '',
      inputValue: '',
      textareaValue: '',
      inputErrorC: '',
      textareaErrorC: '',
      textareaNum: 0,
      inputError: false,
      textareaError: false,
      titleName: '主题'
    }
  },
  mounted: function () {
    this.type = this.$route.query.name
    if (this.type === 'zt') {
      this.titleName = '主题'
    } else if (this.type === 'xxy') {
      this.titleName = '信息源'
    } 
  },
  methods: {
    fedInputB: function (e) {
      if (e.target.nodeName === 'INPUT') {
        var test = ""
        if (this.inputValue === '') {
          this.inputErrorC = '名称不能为空'
          this.inputError = true
        } else if (!(/^[A-Za-z0-9\u4e00-\u9fa5]{0,10}$/.test(this.inputValue))) {
          this.inputErrorC = '支持输入中文、英文、数字，最多10个字符'
          this.inputError = true
        } else {
          this.inputError = false
        }
      } else if (e.target.nodeName === 'TEXTAREA') {
        if (this.textareaValue === '') {
          this.textareaErrorC = '描述不能为空'
          this.textareaError = true
        } else if (!(/^[A-Za-z0-9\u4e00-\u9fa5]{0,100}$/.test(this.inputValue))) {
          this.textareaErrorC = '支持输入中文、英文、数字，最多100个字符'
          this.textareaError = true  
        } else {
          this.inputError = false
        }
      }
    },
    fedInputF: function (e) {
      if (e.target.nodeName === 'INPUT') {
        this.inputError = false
      } else if (e.target.nodeName === 'TEXTAREA') {
        this.textareaError = false
      }
    },
    feedbackFromBut: function () {
      if (this.inputValue === '') {
        this.inputErrorC = '名称不能为空'
        this.inputError = true
      } 
      if (this.textareaValue === '') {
        this.textareaErrorC = '描述不能为空'
        this.textareaError = true
      }
    },
    textareaKey: function () {
      this.textareaNum = this.textareaValue.length
    }
  },
  components: {
    'headerCom': Header
  }
}
</script>

<style>
    @import '../../../static/feedbackZT/feedbackZT.css'
</style>
